<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>塑料宝</title>
    <link rel="stylesheet" href="/static/weui/example.css"/>
    <link rel="stylesheet" href="/static/weui/weui.min.css"/>
    <link rel="stylesheet" href="/static/weui/iconfont.css"/>
    <style type="text/css">
     .no_border_left:after{border-left: none;}
     .weui-search-bar__form:after{width:180%;}
     .weui-search-bar__box .weui-icon-clear{padding: 0 10px 0 10px; right:25px;} 
     .weui-cell{padding:0;}
    </style>
      <style type="text/css">
      [v-cloak] {
      display:none !important;
      }
      </style>
</head>
<body ontouchstart>
    <div class="container">
        <div class="page">
            <div class="page__bd" style="height: 100%;">
                <div  class="weui-tab">
                <div id="tab" class="weui-navbar">
                    <div class="weui-navbar__item">现货信息</div>
                    <div class="weui-navbar__item">采购信息</div>
                </div>
                    <div class="weui-tab__panel" style="padding-bottom: 65px;">
                        <div class="weui-search-bar"  id="searchBar">
                                <form class="weui-search-bar__form">
                                    <div class="weui-search-bar__box" style="padding-right:0;">
                                        <i class="weui-icon-search"></i>
                                        <input type="search" value="{{!empty($params['keyword'])?$params['keyword']:""}}" class="weui-search-bar__input" id="searchInput" placeholder="请输入产品名称" />
                                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                    </div>
                                    <label class="weui-search-bar__label" id="searchText">
                                        <i class="weui-icon-search"></i>
                                        <span>{{!empty($params['keyword'])?$params['keyword']:"请输入产品名称"}}</span>
                                    </label>
                                </form>
                                <a href="javascript:" class="weui-search-bar__cancel-btn"  id="searchResult" style="margin-left: 0; margin-right: 10px;color:#45BAD7;">搜索</a>
                                <a href="javascript:" id="area_btn"  class="weui-form-preview__btn weui-form-preview__btn_default no_border_left" style="overflow: hidden; line-height: 28px; height: 28px; border-left:none;" id="area_btn" href="javascript:">{{!empty($params['area'])?$params['area']:"地区 ↓"}}</a>
                        </div>
                        <form id="frm" method="get" action="/buy">
                            <input type="hidden" id="keyword" value="{{!empty($params['keyword'])?$params['keyword']:""}}" name="keyword"/>
                            <input type="hidden" id="area" value="{{!empty($params['area_code'])?$params['area_code']:""}}" name="area"/>
                             <input type="hidden" id="type" value="{{!empty($params['type'])?$params['type']:""}}" name="type"/>
                        </form>
                         <div class="weui-loadmore" id="loadmore">
                            <i class="weui-loading"></i>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                        <div id="container">
                            <div v-for="item in items" class="weui-form-preview" style="margin-bottom: 10px;color: #999;"  v-cloak>
                                <div class="weui-panel__hd">
                                    <a class="weui-cell weui-cell_access" :href="'/company/'+item.company_id+'.html'">
                                        <div class="weui-cell__hd"><img :src="item.logo|src" style="width:20px;margin-right:5px;display:block"></div>
                                        <div class="weui-cell__bd">
                                            <p>@{{item.name}}
                                            <span v-if="item.valid==1" class="weui-badge custom-badge" style=" background-color: #f00;vertical-align: inherit;">认证企业</span></p>
                                            <div class="clear" style="clear:both;"></div>
                                        </div>
                                        <div class="weui-cell__ft">@{{item.days}}更新</div>
                                    </a>
                                </div>
                                <a :href="'/item/'+item.code_id+'.html'">
                                    <div class="weui-form-preview__bd" style="text-align: inherit">
                                        <div class="weui-flex">
                                            <div class="weui-flex__item">名称：<span>@{{item.variety}}</span></div>
                                            <div class="weui-flex__item">价格：<span style="color: #f17010;">@{{item.price}}</span><span> 元/吨</span></div>
                                        </div>
                                        <div class="weui-flex">
                                            <div class="weui-flex__item">牌号：<span>@{{item.grade}}</span></div>
                                            <div class="weui-flex__item">厂家：<span>@{{item.factory}}</span></div>
                                        </div>
                                        <div class="weui-flex">
                                            <div class="weui-flex__item">数量：<span>@{{item.quantity}} 吨</span></div>
                                            <div class="weui-flex__item">地区：<span>@{{item.city_name}}</span></div>
                                        </div>
                                        <div class="weui-flex" v-if="item.type==1">
                                            <div class="weui-flex__item">用途：<span>@{{item.purpose}}</span></div>
                                            <div class="weui-flex__item">特性：<span>@{{item.demand}}</span></div>
                                        </div>
                                        <div class="weui-flex" v-if="item.type==0">
                                            <div class="weui-flex__item">主要用途：<span>@{{item.purpose}}</span></div>
                                            <div class="weui-flex__item">有效期：<span>@{{item.expiration>0?item.expiration:'已过期'}}</span></div>
                                        </div>
                                        <div class="weui-flex" v-if="item.type==0">
                                            <div class="weui-flex__item">特性要求：<span>@{{item.demand}}</span></div>
                                        </div>
                                    </div>
                                </a>
                                <div class="weui-form-preview__ft" style="line-height: 44px;">
                                    <a @click=viewMobile(item);  class="mobile weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:"><i class="iconfont icon-dianhua"></i> 查看电话</a> <a @click=collectInfo(item); :id="'preview-'+item.code_id" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">
                                    <i class="iconfont icon-guanzhu" :class=" item.favorite ? 2 : 1"></i>  @{{item.favorite?'移除':'添加'}}收藏</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="weui-mask" id="mask" style="display: none"></div>
                            <div class="weui-actionsheet" id="actionsheet">
                                <div class="weui-actionsheet__title">
                                    <p class="weui-actionsheet__title-text" id="company">2323</p>
                                </div>
                                <div class="weui-actionsheet__menu">
                                    <div id="contact" class="weui-actionsheet__cell"></div>
                                    <div id="mobile" class="weui-actionsheet__cell"></div>
                                </div>
                                <div class="weui-actionsheet__action">
                                    <div class="weui-actionsheet__cell" id="cancel">取消</div>
                                </div>
                            </div>
                        </div>
                            <!-- <div id="searchData">
                                
                            </div> -->
                            <div class="page__bd page__bd_spacing">
                                <a style="display: none;" id="more" class="weui-btn weui-btn_primary" href="javascript:">加载更多</a>
                            </div>
                        </div>
                     @include('footer')
                </div>
            </div>
        </div>
    </div>
    <script src="/static/weui/zepto.min.js"></script>
    <script src="/static/weui/weui.min.js"></script>
    <script src="/static/weui/area.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/axios.js"></script>
        <script type="text/javascript">
        var $searchBar = $('#searchBar');
            $searchText = $('#searchText');
            $searchInput = $('#searchInput');
            $searchClear = $('#searchClear');
            $searchResult = $('#searchResult');

            @if(!empty($params['keyword']))
             $searchBar.addClass('weui-search-bar_focusing');
            @endif
             $searchText.on('click', function(){
                $searchBar.addClass('weui-search-bar_focusing');
                $searchInput.focus();
            });
            $searchResult.on('click', function(){
                getResult();
            });
            $searchClear.on('click', function(){
                $searchInput.val('');
                $("#keyword").val('');
                $("#frm").submit();
            });
            function  getResult()
            {
                var keyword=$searchInput.val().trim();
                if(keyword) {
                    $("#keyword").val(keyword);
                }
                $("#frm").submit();
            }
        var totalPage=1,page=1,type=1,$token='{{csrf_token()}}',$loading = $("#loadmore");
        $(function(){
            $("#type").val(type);
        var app = new Vue({
            el: '#container',
            data: {
                items: []
            },
            created: function() {
                axios.get('/index/json?type='+type).then(function(response) {
                    if (typeof(response.data) !== "object") {
                        $loading.hide();
                    } else {
                        totalPage=response.data.last_page;
                        console.log(totalPage);
                        if(totalPage>1){
                        $("#more").show();
                        }
                        app.items = response.data.data;
                        $loading.hide();
                    }
                }).catch(function(error) {
                    $loading.hide();
                });
            },
            methods: {
             viewMobile:function (item){
                var $actionsheet = $('#actionsheet'), $mask = $('#mask');
                function hideActionSheet() {
                    $actionsheet.removeClass('weui-actionsheet_toggle');
                    $mask.fadeOut(200);
                }
                $mask.on('click', hideActionSheet);
                $('#cancel').on('click', hideActionSheet);
                @if (!Auth::check())
                    weui.confirm('请登录后进行查看电话，是否登录？', function () {
                        document.location.href = '{{'/auth/login?redirectUrl='.Request::getUri()}}';
                    }, function () {
                    }, {
                        title: '提示'
                    });
                @else
                    $('#company').html(item.name);
                    $('#contact').html(item.contact);
                    $('#mobile').html('<a class="weui-form-preview__btn_primary text-mobile" href="tel:'+item.mobile+'"><i class="iconfont icon-dianhua"></i> ' + item.mobile + '</a>');
                    $actionsheet.addClass('weui-actionsheet_toggle');
                    $.post('/log/mobile', {'_token': '{{csrf_token()}}','ids': item.ids}, function (response) {
                    })
                    $mask.fadeIn(200);
                @endif
             },
             collectInfo:function(item){
                @if (!Auth::check())
                weui.confirm('请登录后进行关注，是否登录？', function () {
                    document.location.href = '{{'/auth/login?redirectUrl='.Request::getUri()}}';
                }, function () {
                }, {
                    title: '提示'
                });
                @else
                var loading = weui.loading('提交中...');
                var $ids=item.code_id;
                $.post('/member/favorite/action', { _token: $token, ids: $ids }, function(response) {
                    var iconfont = parseInt(response.status)==1 ? 2:1;
                    $('#preview-'+$ids).html('<i class="iconfont icon-guanzhu'+iconfont+'"> '+response.msg+'</i>');
                    loading.hide();
                });
                @endif
             }
            },
            filters: {
                src:function($logo){
                    return $logo?'/assets/'+$logo.path:'/static/images/icon_tabbar.png';
                },
                iconClass:function($flag){
                    var type=$flag?2:1;;
                    return "iconfont icon-guanzhu"+type;
                }
            }
          });
        weui.tab("#tab",{
            defaultIndex: 0,
            onChange: function(index){
                type=Math.abs(index-1);
                 $("#type").val(type);
                var $loading = $("#loadmore");
                axios.get('/index/json?type='+type).then(function(response) {
                    if (typeof(response.data) !== "object") {
                        $loading.hide();
                    } else {
                        app.items = response.data.data;
                        $loading.hide();
                    }
                }).catch(function(error) {
                    $loading.hide();
                });
            }
        });
        document.querySelector('#more').addEventListener('click', function () {
        if(page<totalPage) {
            page++;
            axios.get('/index/json?type='+type+'&page='+page).then(function(response) {
            if (typeof(response.data) !== "object") {
                $loading.hide();
            } else {
                app.items=app.items.concat(response.data.data);
                if(page==totalPage)
                {
                    $("#more").addClass("weui-btn_disabled");
                    $("#more").text("没有更多数据了")
                }
                console.log(app.items);
                $loading.hide();
            }
            }).catch(function(error) {
                $loading.hide();
            });
        }
       });
    });
    </script>
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?c9d98bd3c4db8ee558bceb3d7446b528";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>